<template>
	<view class="content">
		<nav-bar :scrollTop="scrollTop" title="小程序开发咨询"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<!-- 公共组件-每个页面必须引入 -->
		<view class="kemean_box">
			<!-- <image src="http://qn.kemean.cn/upload/202007/09/1594289835055mg8efmi4.png" mode="aspectFit"></image> -->
			<view class="kemean_info">
				<view class="kemean">
					<text>名称：</text>
					<text>科名小程序开发平台</text>
				</view>
				<view class="kemean">
					<text>地址：</text>
					<text>广东省深圳市宝安区智谷科技园F座123</text>
				</view>
				<view class="kemean">
					<text>电话：</text>
					<text>15698753654</text>
				</view>
			</view>
		</view>
		<view class="consult_item_box">
			<view class="consult_item">
				<image src="../../static/icon/ic_mp_navigation.png" mode="aspectFit"></image>
				<text>地图导航</text>
			</view>
			<view class="consult_item" @click="popupShow2 = true">
				<image src="../../static/icon/ic_mp_qr.png" mode="aspectFit"></image>
				<text>客服二维码</text>
			</view>
			<view class="consult_item">
				<image src="../../static/icon/ic_mp_phone.png" mode="aspectFit"></image>
				<text>拨打电话</text>
			</view>
		</view>

		<view class="msg_box">
			<view class="contect">留下电话号码，客服将在24小时内联系您</view>
			<view class="input_box">
				<text>姓名</text>
				<input type="text" value="" placeholder="请输入您的真实姓名" placeholder-class="place" />
			</view>
			<view class="input_box">
				<text>手机号</text>
				<input type="text" value="" placeholder="请输入您的手机号" placeholder-class="place" />
			</view>
			<view class="input_box">
				<text>行业</text>
				<input type="text" value="" placeholder="请填写您当前从事的行业" placeholder-class="place" />
			</view>
			<button type="default">马上提交</button>
		</view>
		<image src="http://qn.kemean.cn/upload/202007/10/1594351223629331wwftk.png" mode="aspectFill" class="poster"></image>
		<z-popup v-model="popupShow2" type="2000">
			<view class="popup_box">
				<view class="popup_content">
					<text>客服微信</text>
					<image :src="supportData.wxcode" mode="aspectFit" @click="onImgSave"></image>
					<text>点击图片保存到本地</text>
				</view>
			</view>
		</z-popup>
	</view>
</template>

<script>
import zPopup from '@/components/common/popup.vue';
let settingWritePhotosAlbum = false;
export default {
	components: {
		zPopup
	},
	data() {
		return {
			popupShow2: false,
			scrollTop: 0,
			supportData: {}
		};
	},
	//第一次加载
	onLoad(e) {
		if (this.$base.supportData) {
			this.supportData = this.$base.supportData;
		}
	},
	//方法
	methods: {
		onPageJump(url) {
			uni.navigateTo({
				url: url
			});
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onImgSave(){
			let imgUrl = this.supportData.wxcode;
			// #ifdef H5
			this.h5SaveImg = imgUrl;
			uni.hideLoading();
			// #endif
			// #ifdef MP-WEIXIN
			uni.showLoading({
				title: '图片下载中'
			});
			if (settingWritePhotosAlbum) {
				uni.getSetting({
					success: res => {
						if (res.authSetting['scope.writePhotosAlbum']) {
							uni.saveImageToPhotosAlbum({
								filePath: imgUrl,
								success: () => {
									uni.hideLoading();
									uni.showToast({
										title: '保存成功'
									});
								}
							});
						} else {
							uni.showModal({
								title: '提示',
								content: '请先在设置页面打开“保存相册”使用权限',
								confirmText: '去设置',
								cancelText: '算了',
								success: data => {
									if (data.confirm) {
										uni.hideLoading();
										uni.openSetting();
									}
								}
							});
						}
					}
				});
			} else {
				settingWritePhotosAlbum = true;
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success: () => {
						uni.saveImageToPhotosAlbum({
							filePath: imgUrl,
							success: () => {
								uni.hideLoading();
								uni.showToast({
									title: '保存成功'
								});
							}
						});
					}
				});
			}
			// #endif
		}
		
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/mixin.scss';
.content {
	background-color: #fff;
	min-height: 100vh;
}
.kemean_box {
	position: relative;
	height: 654rpx;
	padding: 32rpx;
	@include bis('http://qn.kemean.cn/upload/202007/09/1594289835055mg8efmi4.png');
	.kemean_info {
		margin: 32rpx;
		width: calc(100vw - 64rpx);
		background-color: #fff;
		position: absolute;
		left: 0;
		bottom: 0;
		color: #333333;
		padding: 0 32rpx;
		border-radius: 8rpx;
		.kemean {
			padding: 32rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			&:nth-child(1) {
				border-bottom: solid 1rpx #e5e5e5;
			}
			&:nth-child(2) {
				border-bottom: solid 1rpx #e5e5e5;
			}
			text {
				font-size: 24rpx;
				color: #333435;
			}
		}
	}
}
.consult_item_box {
	display: flex;
	margin-top: 32rpx;
	align-items: center;
	justify-content: space-around;
	.consult_item {
		display: flex;
		flex-direction: column;
		align-items: center;
		image {
			width: 40rpx;
			height: 40rpx;
		}
		text {
			margin-top: 20rpx;
			font-size: 24rpx;
			color: #333333;
		}
	}
}
.msg_box {
	padding: 60rpx 60rpx;
	.contect {
		text-align: center;
		width: 100%;
		padding: 24rpx 0;
		background-color: #ffe7f0;
		font-size: 24rpx;
		font-weight: bold;
		color: #ff3682;
	}
	.input_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #e5e5e5;
		padding-bottom: 30rpx;
		margin-top: 60rpx;
		text {
			font-size: 28rpx;
			color: #333435;
		}
		input {
			font-size: 28rpx;
			text-align: right;
		}
		.place {
			color: #cccccc;
		}
	}
	button {
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		border-radius: 8rpx;
		&:nth-child(5) {
			margin-top: 60rpx;
			color: #fff;
			background-color: #ff3682;
		}
	}
}
.poster {
	//min-width: 750rpx;
	width: 100%;
	height: 1334rpx;
}
.popup_box {
	background-color: #ffffff;
	width: 400rpx;
	//height: 460rpx;
	padding: 60rpx 75rpx;
	border-radius: 8rpx;
}
.popup_content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text {
		font-size: 28rpx;
		color: #333435;
		&:nth-child(3){
			margin-top: 20rpx;
			color: #ff403f;
		}
	}
	image {
		margin-top: 20rpx;
		width: 240rpx;
		height: 240rpx;
		// /background-color: #f209a2;
	}
}
</style>
